<template>
   <div class="management-merchant views-container" v-loading = "loading">
      
    <div class="wlm-table">
          <choose-link ref="chooseIconLink" :config="chooseIconLinkConfig" :changeEvt="uploadIconFileChange"></choose-link>
            <choose-files ref="chooseFiless" :config="chooseFilesConfig" :changeEvt="uploadFileChange"></choose-files>
               <!-- 秒杀选择器 -->
            <choose-link ref="spikechooseAdLink" :config="chooseAdLinkConfig" :changeEvt="handleAdLinkChange"></choose-link>
             <!-- 拼团选择器 -->
            <choose-link ref="groupchooseAdLink" :config="groupchooseAdLinkConfig" :changeEvt="gruophandleAdLinkChange"></choose-link>
              <!-- 砍价选择器 -->
            <choose-link ref="bargainchooseAdLink" :config="bargainchooseAdLinkConfig" :changeEvt="bargainhandleAdLinkChange"></choose-link>
             <!-- 抽奖选择器 -->
            <choose-link ref="lotterychooseAdLink" :config="lotterychooseAdLinkConfig" :changeEvt="lotteryhandleAdLinkChange"></choose-link>

            <choose-goods ref="giftchooseGoods"  gift="gift" :config="giftchooseGoodsConfig" :changeEvt="giftfiltersChange"></choose-goods>

            <choose-goods ref="mealchooseGoods"  ismeal="ismeal" :config="mealchooseGoodsConfig" :changeEvt="mealfiltersChange"></choose-goods>
             <!-- 选择次卡 -->
             <el-dialog  custom-class="wlm-form-dialog dialog-table" :visible.sync="dialogTableVisible"  width="50%">
                  <div class="wlm-dialog-fixheader">
                    <span class="wlm-dialog-inlenr">选择次卡</span>
                  </div>  
                  <!-- 内容部分 -->
                    <el-scrollbar style="width:100%;height: 520px;max-height: 520px;">
                        <div class="goods-list-box">
                          <!-- 搜索框 -->
                            <div class="goods-serch">
                                  <el-input  v-model="tableFormatData.userTable.files.name" placeholder="搜索商品名称"></el-input>
                                  <i class="el-icon-search pos-col-center" @click="filesSerch"></i>
                            </div>
                            <!-- 搜索框结束 -->
                            <!-- 商品部分 -->
                            <div v-if="hasTableData.length >0"  class="goods-list-group flex-row flex-warp">
                              <div class="goods-list" v-for="(item, index) in tableFormatData.userTable.tableData" :key="index">
                                    <div class="goods-item flex-row flex-align-c">
                                      <div class="img-center" v-if="item.image && item.image[0]" :style="{'background-image':`url(${item.image[0].file_path})`}"></div>
                                      <div class="img-center" ></div>
                                      <!-- <div class="img-center" v-if="item.logo && item.logo[0]" :style="{'background-image':`url(${item.logo[0].file_path})`}"></div> -->
                                          <div class="flex-col flex-align-c flex-justify-b scale-grow">
                                            <div class="ellipsis">
                                              <p style="line-height:1.6">{{item.name}}</p>
                                            </div>
                                            <p class="flex-row flex-align-c flex-justify-b flex-grow-1" style="font-size: 16px;">
                                              <!-- <span class="text-danger" >￥{{item.unit_price}}</span> -->
                                              <span class="text-danger" ></span>
                                              <el-button
                                                type="primary"
                                                :class="{'is-active':newcurrentRow.includes(item.card_class_id)}"
                                                round
                                                plain
                                                size="mini"
                                                style="font-size:12px;"
                                                @click="chooseGoodsbtn(item.card_class_id,item)"
                                              >{{`${newcurrentRow.includes(item.card_class_id)?'取消':'选择'}`}}</el-button>
                                            </p>
                                          </div>
                                    </div>
                              </div>
                            </div>
                            <div class="no-tabledata" v-if="isTableFormatGetEnd && !(hasTableData.length >0)" v-cloak>
                              <svg-icon style icon-class="notabledata" />
                              <span style="display: block;margin: -45px auto 0;">暂无商品数据</span>
                            </div>
                            <!-- 商品部分结束 -->
                        </div>
                    </el-scrollbar>
                    <div class="pagination-content flex-row flex-justify-b flex-align-c">
                        <el-row class="pagination-btns"></el-row>
                        <el-pagination
                          style="margin-top:20px;margin-bottom:20px;margin-right: 25px;"
                          :disabled="!hasTableData"
                          @size-change="listPageChange"
                          @current-change="listPageChange"
                          :current-page.sync="tableFormatData.userTable.pagination.page"
                          :page-sizes="tableFormatData.userTable.pagination.pagesizes"
                          :page-size.sync="tableFormatData.userTable.pagination.list_rows"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="hasTableData.length > 0 ? tableFormatData.userTable.pagination.total : 0"
                        ></el-pagination>
                  </div>

                    <div class="wlm-dialog-fixfooter">
                    <span slot="footer" class="dialog-footer">
                      <!-- @click="toggle" -->
                      <el-button size="small" @click="toggle">取 消</el-button>
                      <!-- @click="saveChoose" -->
                      <el-button size="small" type="primary"  @click="saveChoose">确 定</el-button>
                    </span>
                  </div>
             </el-dialog>
      <div class="wlm-dialog-content">
          <!-- :model="formFormatData.formData" :rules="formFormatData.rules" -->
             <el-form ref="treasure" :model="formFormatData.formData" size="small" label-width="130px" class="retail-form" label-position="right">
                 <el-form-item label="活动名称">
                     <!--  -->
                     <el-input v-model.trim="formFormatData.formData.name"  placeholder="请输入活动名称" style="width:60%;"></el-input>
                </el-form-item>
                   <el-form-item label="有效期">
                       <el-radio-group v-model="formFormatData.formData.time_type" class="wlm-form-group flex-col">
                            <el-radio :label="1">
                              长期有效
                            </el-radio>
                            <el-radio :label="2">
                                指定日期
                            </el-radio>
                            
                          </el-radio-group>
                            <el-form-item label v-if="formFormatData.formData.time_type == 2">
                                     <el-date-picker :picker-options="pickerOptions"
                                     style="margin-top:10px;"
                                      v-model="formFormatData.formData.time" value-format="timestamp"
                                       type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                        :default-time="[`${`${new Date().getHours()}`.padStart(2,'0')}:${`${new Date().getMinutes()+2}`.padStart(2,'0')}:00`,'23:59:59']"></el-date-picker>
                                 </el-form-item>
                   </el-form-item>
                    <el-form-item label="指定支付商品">
                          <el-radio-group v-model="formFormatData.formData.appoint_type" class="wlm-form-group flex-col" @change="handappoint"> 
                            <el-radio :label="1">
                              全部商品
                            </el-radio>
                            <el-radio :label="2">
                                指定分类
                            </el-radio>
                              <el-radio :label="3">
                                指定商品
                            </el-radio>
                          </el-radio-group>
                          <div v-if="formFormatData.formData.appoint_type==2" style="margin-top:10px;">
                              <el-select v-model="formFormatData.formData.category_name" multiple @remove-tag="removeTag" collapse-tags placeholder="请选择">
                                              <el-option style="height:auto;padding: 0;" key="key" label="label" value="value" v-if="categoryData.length>0">
                                                <div class="category_name-tree">
                                                  <el-tree
                                                      ref="trees"
                                                      @check="checkChange"
                                                      :default-checked-keys="formFormatData.formData.category"
                                                      node-key="category_id"
                                                      highlight-current
                                                      :props="{label: 'name',children: 'child',isLeaf: 'leaf'}"
                                                      :data="categoryData"
                                                      show-checkbox></el-tree>
                                                </div>
                                              </el-option>
                                            </el-select>
                          </div>
                          <div v-if="formFormatData.formData.appoint_type==3">
                              <choose-goods ref="chooseGoods" :config="chooseGoodsConfig" :changeEvt="filtersChange"></choose-goods>
                                <el-button type="primary" @click="goodsToogle">选择商品</el-button>
                                <div style="height:10px;"></div>
                                <el-table v-if="formFormatData.formData.goods != ''" :data="formFormatData.formData.goods" style="width: 60%;">
                                    <el-table-column label="商品">
                                        <template slot-scope="scope">
                                            <div class="flex-row">
                                                <!-- {{scope.row.}} -->
                                                <img class="logo" v-if="scope.row.image && scope.row.image" :src="scope.row.image[0]['file_path']">
                                                <!-- <img class="logo" :src="scope.row.goods.image[0]['file_path']"> -->
                                                <div class="inner-text">
                                                    <p>{{scope.row.goods_name}}</p>
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
                                            <div class="operation-group">
                                                <el-button class="wlm-text" type="text" @click="deleteTable(scope)">删除</el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                          </div>
                   </el-form-item>
                    <el-form-item label="关联插件">
                            <div v-for="(item,index) in formFormatData.formData.relation" :key="index">
                              <div style="display:flex;align-items: center;">
                                   <div style="border-bottom: 1px solid #cccccc;margin-bottom: 20px;width:">
                                        <div>关联{{index+1}}：</div>
                                          <div style="margin-left:20px;">
                                                <div>选择关联
                                                <!-- v-model="value" -->
                                                    <el-select v-model="item.relation_type" placeholder="请选择">
                                                        <el-option
                                                            v-for="newitem in getOptions({current:item.relation_type})"
                                                            :key="newitem.value"
                                                            :label="newitem.label"
                                                           :disabled="newitem.disabled"
                                                            :value="newitem.value">
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                                <div v-if="item.relation_type!=''">
                                                    <!-- 选择{{item.relation_type==1}} -->
                                                    <!-- {{item.relation_type==1}} -->
                                                    <span>
                                                        <span v-if="item.relation_type==1">选择秒杀</span>
                                                        <span v-if="item.relation_type==2">选择拼团</span>
                                                        <span v-if="item.relation_type==3">选择砍价</span>
                                                        <span v-if="item.relation_type==4">选择抽奖</span>
                                                        <span v-if="item.relation_type==5">选择卡包</span>
                                                        <span v-if="item.relation_type==6">选择礼包商品</span>
                                                        <span v-if="item.relation_type==7">选择套餐商品</span>
                                                        <!-- <span v-if="item.relation_type==8">选择其他</span> -->
                                                    </span>
                                                        <!-- @click="uploadtoggle" -->
                                                          <span v-if="item.relation_type==1">
                                                                <!-- :value="typeof custormItemData.params.link === 'string' ? custormItemData.params.link : custormItemData.params.link.path" -->
                                                                <input @focus="uploadTriggerbtn(index)" v-model="item.relation_choice.title" style="background: #e8effc;border: 0;cursor: pointer;height: 32px;padding: 4px 12px;font-size: 12px;border-radius: 4px" autocomplete="off" spellcheck="false" type="text" placeholder="请选择链接" readonly="readonly" >
                                                          </span>
                                                            <span v-if="item.relation_type==2">
                                                                <input @focus="groupuploadTriggerbtn(index)" v-model="item.relation_choice.title" style="background: #e8effc;border: 0;cursor: pointer;height: 32px;padding: 4px 12px;font-size: 12px;border-radius: 4px" autocomplete="off" spellcheck="false" type="text" placeholder="请选择链接" readonly="readonly" >
                                                          </span>
                                                           <span v-if="item.relation_type==3">
                                                                <input @focus="bargainuploadTriggerbtn(index)" v-model="item.relation_choice.title" style="background: #e8effc;border: 0;cursor: pointer;height: 32px;padding: 4px 12px;font-size: 12px;border-radius: 4px" autocomplete="off" spellcheck="false" type="text" placeholder="请选择链接" readonly="readonly" >
                                                          </span>
                                                          <span v-if="item.relation_type==4">
                                                                <input @focus="lotteryuploadTriggerbtn(index)" v-model="item.relation_choice.title" style="background: #e8effc;border: 0;cursor: pointer;height: 32px;padding: 4px 12px;font-size: 12px;border-radius: 4px" autocomplete="off" spellcheck="false" type="text" placeholder="请选择链接" readonly="readonly" >
                                                          </span>
                                                          
                                                           <span v-if="item.relation_type==5">
                                                                 <el-button
                                                                      type="primary"
                                                                      @click="TimecardBtn(index)"
                                                                      style="margin-top:20px;"
                                                                      >选择次卡</el-button>
                                                                      <el-table
                                                                          :data="item.card"
                                                                          style="margin-top:20px"
                                                                          v-if="item.card!=''"
                                                                        >
                                                                        <el-table-column prop="date" label="活动名称">
                                                                            <template slot-scope="scope">
                                                                              <div class="flex-row">
                                                                                <div class="inner-text">
                                                                                  <p>{{ scope.row.title}}</p>
                                                                                </div>
                                                                              </div>
                                                                            </template>
                                                                          </el-table-column>
                                                                          
                                                                          <el-table-column label="操作">
                                                                            <template slot-scope="scope">
                                                                              <div class="operation-group">
                                                                                <el-button
                                                                                  class="wlm-text"
                                                                                  type="text"
                                                                                  @click="cardeleteTable(scope,index)"
                                                                                  >删除</el-button
                                                                                >
                                                                              </div>
                                                                            </template>
                                                                          </el-table-column>
                                                                        </el-table>
                                                                <!-- <input @focus="lotteryuploadTriggerbtn(index)" v-model="item.relation_choice.title" style="background: #e8effc;border: 0;cursor: pointer;height: 32px;padding: 4px 12px;font-size: 12px;border-radius: 4px" autocomplete="off" spellcheck="false" type="text" placeholder="请选择链接" readonly="readonly" > -->
                                                          </span>
                                                          <span v-if="item.relation_type==6">
                                                                <el-button type="primary" @click="giftgoodsToogle(index)">选择礼包商品</el-button>
                                                                 <div style="height:10px;"></div>
                                                                    <el-table v-if="item.giftgoods != ''" :data="item.giftgoods">
                                                                        <el-table-column label="商品">
                                                                            <template slot-scope="scope">
                                                                                <div class="flex-row">
                                                                                    <!-- {{scope.row.}} -->
                                                                                    <img class="logo" v-if="scope.row.goods.image && scope.row.goods.image" :src="scope.row.goods.image[0]['file_path']">
                                                                                    <!-- <img class="logo" :src="scope.row.goods.image[0]['file_path']"> -->
                                                                                    <div class="inner-text">
                                                                                        <p>{{scope.row.goods.goods_name}}</p>
                                                                                    </div>
                                                                                </div>
                                                                            </template>
                                                                        </el-table-column>
                                                                        <el-table-column label="操作">
                                                                            <template slot-scope="scope">
                                                                                <div class="operation-group">
                                                                                    <el-button class="wlm-text" type="text" @click="giftdeleteTable(scope,index)">删除</el-button>
                                                                                </div>
                                                                            </template>
                                                                        </el-table-column>
                                                                    </el-table>
                                                          </span>
                                                          <span v-if="item.relation_type==7">
                                                                <el-button type="primary" @click="mealgoodsToogle(index)">选择套餐商品</el-button>
                                                                 <div style="height:10px;"></div>
                                                                    <el-table v-if="item.mealgoods != ''" :data="item.mealgoods">
                                                                        <el-table-column label="商品">
                                                                            <template slot-scope="scope">
                                                                                <div class="flex-row">
                                                                                    <!-- {{scope.row.}} -->
                                                                                    <img class="logo" v-if="scope.row.goods.image && scope.row.goods.image" :src="scope.row.goods.image[0]['file_path']">
                                                                                    <!-- <img class="logo" :src="scope.row.goods.image[0]['file_path']"> -->
                                                                                    <div class="inner-text">
                                                                                        <p>{{scope.row.goods.goods_name}}</p>
                                                                                    </div>
                                                                                </div>
                                                                            </template>
                                                                        </el-table-column>
                                                                        <el-table-column label="操作">
                                                                            <template slot-scope="scope">
                                                                                <div class="operation-group">
                                                                                    <el-button class="wlm-text" type="text" @click="mealdeleteTable(scope,index)">删除</el-button>
                                                                                </div>
                                                                            </template>
                                                                        </el-table-column>
                                                                    </el-table>
                                                          </span>

                                                </div>
                                                <div style="display:flex;" v-if="item.relation_type==4">
                                                  <div>选择期数</div>
                                                  <div>
                                                    <div style="display: flex;justify-content: space-between;">
                                                        <div class="form-label mb-20" style="margin-left:20px;">选择期数</div>
                                                      </div>
                                                    </div>
                                                  
                                                    <div class="">
                                                        <el-checkbox-group v-model="item.peridosData">
                                                        <div class="allchoose">
                                                            <div
                                                            class="chooseOne"
                                                            v-for="(pridrosItem,pridrosIndex) in item.peridos"
                                                            :key="pridrosIndex"
                                                          >
                                                            <el-checkbox
                                                              border
                                                              size="small"
                                                              :label="pridrosItem.luck_period_id"
                                                            >第{{pridrosItem.luck_period_id}}期</el-checkbox>
                                                          </div>
                                                        </div>
                                                        </el-checkbox-group>
                                                      </div>
                                                 
                                                </div>
                                            <div style="display: flex;align-items: center;margin: 10px 0 10px 10px;">
                                                <div>
                                                    广告图
                                                </div>
                                                <div>
                                                        <img
                                                        class="wlm-upload-img"
                                                        style="margin-left:10px;width:100px;cursor:pointer;"
                                                    @click="uploadTrigger('chooseIcon',index, 'default')"
                                                        :src="item.relation_picture?item.relation_picture:`${require('@/assets/custorm_style/default_picture.png')}`"
                                                        >
                                                        <p class="form-help">建议尺寸：690x180</p>
                                                    </div>
                                            </div>
                                            <div style="margin-bottom:20px;">
                                                跳转链接:
                                                  <el-input style="width:280px;margin-left:10px;" v-model="item.relation_url" @focus="uploadFileToggle(index)"  placeholder="请选择链接"></el-input>
                                            </div>
                                          </div>
                                    </div>
                                <div style="margin-left:20px;">
                                    <i class="el-icon-delete" @click="delMeal(index)"></i>
                                </div>
                              </div>
                            </div>
                         <el-button type="primary" icon="el-icon-plus" @click="addAssociations">关联插件</el-button>
                   </el-form-item>
                    <el-form-item label="奖励">
                           <!-- <div class="fileItemHeader flex-row flex-align-c" style="justify-content: space-between;" v-if="formFormatData.formData.reward!=''"> -->
                           <div class="fileItemHeader flex-row flex-align-c" style="justify-content: space-between;" v-if="formFormatData.formData.reward!=''">
                              <p class="icon">奖励类型</p>
                              <p class="text">值</p>
                              <p class="link">分享才可领取</p>
                              <p class="link">领取用户</p>
                            </div>
                            <!-- -->
                            <div v-for="(saveitem, saveindex) in formFormatData.formData.reward"  v-dragging="{ item: saveitem, list: formFormatData.formData.reward, group: 'buttonLis'}" v-bind:key="saveindex" class="fileItem flex-row flex-align-c" style="justify-content: space-between;">
                                    <!-- reward_type:奖励类型；（1：赠送积分；2：返现至余额；3：赠送优惠券；4：支付X元再下一单）
                                    reward_value:奖励值
                                    receive_user:领取用户；（1：所有用户；2：会员用户）
                                    is_share:是否分享；2：否；1：是 -->
                                     <p class="fileName">
                                       <el-button type="text" @click="delrewardbtn(saveindex)">删除</el-button>
                                     </p>
                                      <div class="flex-row flex-align-c flex-justify-c update-load" >
                                        <el-select v-model="saveitem.reward_type" placeholder="请选择">
                                            <el-option
                                              v-for="item in rewardoptionsbtn({current:saveitem.reward_type})"
                                              :key="item.value"
                                              :label="item.label"
                                              :value="item.value">
                                            </el-option>
                                          </el-select>
                                      </div>
                                   <div>
                                          <div style="margin-left:46px;width: 154px;"  v-if="saveitem.reward_type=='1'">
                                          赠送
                                            <el-input-number style="width:80px;" v-model="saveitem.reward_value"  class="inputNumber"  :controls="false" :min="1"></el-input-number>积分
                                        </div>
                                        <div style="margin-left:46px;width: 154px;" v-if="saveitem.reward_type=='2'">
                                          返现
                                            <el-input-number style="width:80px;" v-model="saveitem.reward_value" class="inputNumber"  :controls="false" :min="1"></el-input-number>元余额
                                        </div>
                                        <div style="margin-left:46px;" v-if="saveitem.reward_type=='3'">
                                            <el-select
                                                filterable
                                                v-model="saveitem.reward_value"
                                                placeholder="请选择购买赠送优惠券"
                                                class="filterselect"
                                              >
                                                <el-option
                                                  v-for="item in couponList"
                                                  :key="item.coupon_id"
                                                  :label="item.name"
                                                  :value="item.coupon_id.toString()"
                                                ></el-option>
                                              </el-select>
                                        </div>
                                   </div>
                                      <div style="margin-left:270px;">
                                          <el-switch active-value="1" inactive-value="2" v-model="saveitem.is_share"> </el-switch>
                                      </div>
                                       <div style="margin-left:270px;">
                                           <el-radio-group v-model="saveitem.receive_user">
                                              <el-radio label="1">所有用户</el-radio>
                                              <el-radio label="2">会员用户</el-radio>
                                            </el-radio-group>
                                       </div>
                                  <div>
                                    <i style="margin-right:20px;cursor: pointer;" class="el-icon-rank"></i>
                                  </div>
                                </div>
                       <el-button type="primary" icon="el-icon-plus" @click="addReward">添加奖励</el-button>
                   </el-form-item>
                    <el-form-item label="分享图">
                           <choose-files ref="chooseFiles" :config="choosePlatsappConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                            <!-- <div class="form-help">建议尺寸：100*100像素</div> -->
                   </el-form-item>
                    <el-form-item label="分享标题">
                        <el-input v-model="formFormatData.formData.title" placeholder="请输入分享标题" style="width:300px;"></el-input>
                   </el-form-item>
                    <el-form-item label="分享描述">
                        <el-input v-model="formFormatData.formData.describe" placeholder="请输入分享描述" style="width:300px;"></el-input>
                   </el-form-item>
             </el-form>
      </div>
    </div>
      <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
            <el-button size="small" @click="saveForm" type="primary" :loading="butt">保存</el-button>
            <router-link tag="span" to="/application/paymentMarketing">
                <el-button size="small">返回</el-button>
            </router-link>
        </div>
   </div>
</template>
<script>
import {
  categoryIndex,
} from '@/api/merchandise'
import {
  tooggleArray
} from '@/utils/index'
import power from '@/mixins/power'

import {  couponList,editPayMarketing,payMarketingInfo} from "@/api/application";
import ChooseGoods from '@/components/ChooseGoods/index'
import ChooseLink from '@/components/ChooseLink/index'
import ChooseFiles from '@/components/ChooseFiles/index'
// import {getCardInfo } from "@/api/freeofcharge";
import {
  cardIndex,
} from "@/api/cardBag";
import fp from "lodash/fp";
  import { Base64 } from 'js-base64'



import mixins from '@/mixins/mixins'

export default {
     mixins: [mixins.getters('Form'),mixins.getters("Table"),power],
     name:'paymentMarketingAdd',
     components: {
        ChooseGoods,
        ChooseLink,
        ChooseFiles
    },
    computed: {
    getPath() {
      return function(path) {
        return path.includes("https://") || path.includes("http://")
          ? `${path}`
          : require(`@/assets/custorm_style/${path}`);
      };
    },
    //秒杀权限
    // $spike(){
    //   return this.patSetting.plugin.spike.open
    // },

    //  $groups(){
    //   return this.patSetting.plugin.groups.open
    // },
    // $bargain(){
    //   return this.patSetting.plugin.bargain.open
    // },
    //   $luck(){
    //   return this.patSetting.plugin.luck.open
    // },
    // $card_bag(){
    //   return this.patSetting.plugin.card_bag.open
    // },
    //  $gift(){
    //   return this.patSetting.plugin.gift.open
    // },
  },
  watch: {
    'formFormatData.formData.relation.relation_type':{
      handler(newData, oldData){
        // if(newData==0){
        //   this.formFormatData.formData.form_id=''
        // }
        console.log("22222222220",newData,oldData)
      },
       immediate: true,
        deep: false
    },
  },
  created () {
    this.fetchCouponList();
    if(this.$route.query.id){
                  this.payMarketingInfobtn()
              }
              this.categoryGet()
  },
    data () {
                var checkCategory = (rule, value, callback) => {
            // 验证前从树节点获取值
            // this.formFormatData.formData.category_name = this.$refs.trees.getCheckedKeys()
            const category_name = this.formFormatData.formData.category_name
            const { message } = rule
            if (!Array.isArray(category_name) || (Array.isArray(category_name) && category_name.length === 0)) {
                return callback(new Error(`${message}！~`))
            } else {
                callback()
            }
            }
        return {
          loading:false,
           butt:false,
          couponList: [],
          currentRow:[],
          category_name:[],
          newcurrentRow:[],
          giftcurrentRow:[],
          mealcurrentRow:[],
          results:[],
          timecardData:[],
          
            choosePlatsappConfig: {
                type: ['image'],
                model: 'display',
                uploadConfig: {
                limit: 1,
                isMore: true,
                model: 'display'
                },
                initList: [],
                isShowList: true,
                file_type: 'image',
                bindKey: {
                key: 'image',
                model: 'img'
                }
            },
           dialogTableVisible:false,
           rewardoptions:[
             { value: '1',
              label: '赠送积分'},
                { value: '2',
              label: '返现至余额'},
                { value: '3',
              label: '赠送优惠券'},
             ],
               options: [{
                    value: '1',
                    label: '秒杀',
                    }, {
                    value: '2',
                    label: '拼团',
                    }, {
                    value: '3',
                    label: '砍价',
                    }, {
                    value: '4',
                    label: '抽奖',
                    }, {
                    value: '5',
                    label: '卡包',
                    },
                    {
                    value: '6',
                    label: '礼包商品', 
                    },
                     {
                    value: '7',
                    label: '套餐商品',
                    },
                    {
                    value: '8',
                    label: '其他',
                    }
                    ],
            categoryData:[],
            //时间处理，当前时间之前的时间不能选择
            pickerOptions: {
                disabledDate(time) {
                return time.getTime() < Date.now() - 8.64e7
                }
            },
            // 选择商品参数
            chooseGoodsConfig: {
                type: ['chooseGoods'],
                model: 'normal',
                goods_type: "all",
                // unique: true,
                // thumbtn: 'thumbtns',
                initList: [],
            },
            // 选择商品参数
            giftchooseGoodsConfig: {
                type: ['chooseGoods'],
                model: 'normal',
                goods_type: "all",
                // unique: true,
                // thumbtn: 'thumbtns',
                initList: [],
            },
            mealchooseGoodsConfig: {
                type: ['chooseGoods'],
                model: 'normal',
                goods_type: "all",
                // unique: true,
                // thumbtn: 'thumbtns',
                initList: [],
            },
            //选择链接
            chooseIconLinkConfig: {
                    type: ['chooseLink'],
                    initList: [],
                    link_type: '1'
                },
             chooseAdLinkConfig:{
                    type: ['chooseLink'],
                    initList: [],
                    link_type: 'spike'
             },
             groupchooseAdLinkConfig:{
                    type: ['chooseLink'],
                    initList: [],
                    link_type: 'group'
             },
             bargainchooseAdLinkConfig:{
                    type: ['chooseLink'],
                    initList: [],
                    link_type: 'bargain'
             },
             lotterychooseAdLinkConfig:{
                    type: ['chooseLink'],
                    initList: [],
                    link_type: 'lottery'
             },
                //图片
                chooseFilesConfig: {
                    type: ['image'],
                    model: 'normal',
                    initList: [],
                    file_type: 'image'
                },
            formFormatData: {
                key: 'paymentMarketingAdd',
                api:{
                  editForm:{
                    //   api:getAssist,
                      params:{
                          id:this.$route.query.id
                      },
                       redirect: 'id',
                      filters: {
                           img: {
                                bindInit: ['choosePlatsappConfig']
                            },
                            choose: {
                              bindInit: ["chooseGoodsConfig","giftchooseGoodsConfig","mealchooseGoodsConfig"]
                            }
                      },
                    noFilter: ['category_name'],
                    },
                //   submitForm:AssistAddEdit
                },
                formData:{
                   name:'',
                   title:'',
                   describe:'',
                   time_type:1,
                   category:[],
                   category_name:[],
                   appoint_type:1,
                   goods:[],
                   relation:[],
                   time:'',
                   image:[],
                   reward:[],
                }
             },
             tableFormatData: {
                current: 'userTable',
                userTable: {
                  key: 'userTable',
                  api: {
                    getList:cardIndex
                  },
                  tableData: [],
                  files: {
                    title:'',
                  },
                  pagination: {
                    page: 1,
                    list_rows: 10,
                    pagesizes: [10, 20, 50],
                    total: 0
                  }
                }
              }
           
        }
    },
    methods: {
      qishuChange() {
  
    },
      //处理关联插件，不能重复选择
      getOptions({
        defaultOptions = this.options,
        current
      }={}) {
        const otherTypes = fp.flowRight(fp.omitBy(item=>item == current),fp.map(item=>item.relation_type),fp.get('formData.relation'))(this.formFormatData)
        const arr = fp.filter(item=>!fp.includes(''+item.value,otherTypes),defaultOptions)
          arr.map(item=>{
            //新增属性判断授权
            if(item.label=='秒杀'){
              this.$set(item,'disabled',!this.patSetting.plugin.spike.open)
            }
            if(item.label=='拼团'){
              this.$set(item,'disabled',!this.patSetting.plugin.groups.open)
            }
             if(item.label=='砍价'){
              this.$set(item,'disabled',!this.patSetting.plugin.bargain.open)
            }
            if(item.label=='抽奖'){
              this.$set(item,'disabled',!this.patSetting.plugin.luck.open)
            }
            if(item.label=='卡包'){
              this.$set(item,'disabled',!this.patSetting.plugin.card_bag.open)
            }
             if(item.label=='礼包商品'){
              this.$set(item,'disabled',!this.patSetting.plugin.gift.open)
            }
          })
        return arr

            // $spike(){
    //   return this.patSetting.plugin.spike.open
    // },

    //  $groups(){
    //   return this.patSetting.plugin.groups.open
    // },
    // $bargain(){
    //   return this.patSetting.plugin.bargain.open
    // },
    //   $luck(){
    //   return this.patSetting.plugin.luck.open
    // },
    // $card_bag(){
    //   return this.patSetting.plugin.card_bag.open
    // },
    //  $gift(){
    //   return this.patSetting.plugin.gift.open
    // },
      },
      //处理奖励不能重复选择
      rewardoptionsbtn({
        defaultOptions = this.rewardoptions,
        current
      }={}){
      const otherTypes = fp.flowRight(fp.omitBy(item=>item == current),fp.map(item=>item.reward_type),fp.get('formData.reward'))(this.formFormatData)
        const arr = fp.filter(item=>!fp.includes(''+item.value,otherTypes),defaultOptions)
        // console.log(111111,arr)     
        return arr
      },
      payMarketingInfobtn(){
        this.loading = true
              this.butt = true
        payMarketingInfo({id:this.$route.query.id}).then(res=>{
          if(res.data.code==1){
            this.formFormatData.formData = res.data.data
            // this.formFormatData.formData.time = res.data.data.time
            this.formFormatData.formData.image = res.data.data.image
            this.choosePlatsappConfig.initList = res.data.data.image
            this.loading = false
              this.butt = false
              console.log("fffffffffff",res)
          }
        })
      },
      // 保存
      saveForm(){
         this.butt = true
         console.log("fdshfdsfdsf",this.formFormatData.formData)
        // return
         const data = Base64.encode(JSON.stringify(this.formFormatData.formData))
          //判断是否是编辑
            if(this.$route.query.id){
                     editPayMarketing({data}).then(res=>{
                        const { data: { code, msg } } = res
                        if(code==1){
                            this.butt= false
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            })
                            this.$router.push('/application/paymentMarketing')
                        }else{
                            this.butt= false
                            this.$message.error(msg)
                        }
                    }).finally(()=>{
                         this.butt= false
                    })
            }else{ 
                  editPayMarketing({data}).then(res=>{
                   const { data: { code, msg } } = res
                         if(code==1){
                             this.butt = false
                            this.$message({
                                type: 'success',
                                message: '保存成功!'
                            })
                            this.$router.push('/application/paymentMarketing')
                        }else{
                            this.butt = false
                            this.$message.error(msg)
                        }
                }).finally(()=>{
                    this.butt= false
                })
            }
      
      },
       // 请求用户标签列表数据
    fetchCouponList() {
      couponList({
        page: 1,
        list_rows: 1000
      }).then(res => {
        this.couponList = fp.get("data.data.data", res);
      });
    },
        //   构造商品信息
        filtersChange(val) {
            this.currentRow = val.currentRow
            const displayData = val.displayData
            const result = []
            displayData.map(item => {
                // const newData = {
                //     image: [{
                //         file_path: item.image[0]['file_path']
                //     }],
                //     goods_name: item.goods_name,
                //     goods_id: item.goods_id,
                //     stock_num: item.stock,
                //     goods_price: item.goods_min_price
                // }
                result.push({
                   image: [{
                        file_path: item.image[0]['file_path']
                    }],
                     goods_name: item.goods_name,
                     stock_num: item.stock,
                     goods_price: item.goods_min_price,
                     goods_id: item.goods_id
                })
            })
            this.formFormatData.formData.goods.push(...result) 
        },
        giftfiltersChange(val){
           this.giftcurrentRow = val.currentRow
            const displayData = val.displayData
            const result = []
            displayData.map(item => {
                const newData = {
                    image: [{
                        file_path: item.image[0]['file_path']
                    }],
                    goods_name: item.goods_name,
                    goods_id: item.goods_id,
                    stock_num: item.stock,
                    goods_price: item.goods_min_price
                }
                result.push({
                    goods: newData,
                    goods_id: item.goods_id
                })
            })
            const index = this.index
            this.formFormatData.formData.relation[index].giftgoods.push(...result) 
        },
        mealfiltersChange(val){
           this.mealcurrentRow = val.currentRow
            const displayData = val.displayData
            const result = []
            displayData.map(item => {
                const newData = {
                    image: [{
                        file_path: item.image[0]['file_path']
                    }],
                    goods_name: item.goods_name,
                    goods_id: item.goods_id,
                    stock_num: item.stock,
                    goods_price: item.goods_min_price
                }
                result.push({
                    goods: newData,
                    goods_id: item.goods_id
                })
            })
            const index = this.index
            this.formFormatData.formData.relation[index].mealgoods.push(...result) 
        },
        //控制商品弹出框的显示
        goodsToogle() {
            const result = []
            this.formFormatData.formData.goods.map(item => {
              result.push(Number(item.goods_id))
            })
            this.$refs.chooseGoods.currentRow = result
            this.$refs.chooseGoods.toggle()
        },
        giftgoodsToogle(index) {
            const result = []
             this.index = index
            this.formFormatData.formData.relation[index].giftgoods.map(item => {
              result.push(Number(item.goods_id))
            })
            this.$refs.giftchooseGoods.currentRow = result
            this.$refs.giftchooseGoods.toggle()
        },
         mealgoodsToogle(index) {
            const result = []
             this.index = index
            this.formFormatData.formData.relation[index].mealgoods.map(item => {
              result.push(Number(item.goods_id))
            })
            this.$refs.mealchooseGoods.currentRow = result
            this.$refs.mealchooseGoods.toggle()
        },
         //  删除选中的商品
        deleteTable(scope) {
            this.formFormatData.formData.goods.splice(scope.$index, 1)
            this.currentRow.splice(scope.$index, 1)
        },
        giftdeleteTable(scope,index){
          // const index = this.index
           this.formFormatData.formData.relation[index].giftgoods.splice(scope.$index, 1)
            this.giftcurrentRow.splice(scope.$index, 1)
        },
        mealdeleteTable(scope,index){
          //  const index = this.index
           this.formFormatData.formData.relation[index].mealgoods.splice(scope.$index, 1)
            this.mealcurrentRow.splice(scope.$index, 1)
        },
        handappoint(val){
          if(val==2){
            this.categoryGet()
          }
        },
        categoryGet() {
            categoryIndex().then((response) => {
                const { data: { data: msgData = [] } } = response
                this.categoryData = msgData
            })
        },
        removeTag(tag) {
      this.formFormatData.formData.category.splice(0, 1)
      this.$refs.trees.setCheckedKeys(this.formFormatData.formData.category)
    },
    checkChange(check, checkedNodes) {
      console.log(check, 'check')
      console.log(checkedNodes, 'checkedNodes')
      console.log(this.category_name, 'this.category_name')
      this.formFormatData.formData.category = checkedNodes.checkedKeys
      console.log("99999999999999999999999999999",this.formFormatData.formData.category)
      const result = []
      checkedNodes.checkedNodes.map(item => {
        result.push(item.name)
      })
      console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxx",result)
      this.formFormatData.formData.category_name = result
    },
    
    addAssociations(){
        if(this.formFormatData.formData.relation.length>7){
            return this.$message.error('最多添加8个插件！')
        }else{
            // relation_type 选择关联
            // relation_choice 选择拼团 秒杀  砍价 抽奖
            // relation_picture  图片
            // relation_url 跳转链接
            //card  卡包数据
            // giftgoods  礼包数据
            // mealgoods  套餐数据
            //peridos   抽奖期数
             this.formFormatData.formData.relation.push({ peridosData:[],peridos:[],checkAll:false,isIndeterminate:true,relation_type: '',relation_choice :{title:'',id:''},relation_picture:'',relation_url:'', card:[],giftgoods:[], mealgoods:[],})
        }
        
    },
    addReward(){
      if(this.formFormatData.formData.reward.length>2){
        return this.$message.error('最多添加3个奖励！')
      }else{
        // reward_type:奖励类型；（1：赠送积分；2：返现至余额；3：赠送优惠券；4：支付X元再下一单）
        // reward_value:奖励值
        // receive_user:领取用户；（1：所有用户；2：会员用户）
        // is_share:是否分享；2：否；1：是
        this.formFormatData.formData.reward.push({ reward_type: '1',reward_value :'',receive_user:'1',is_share:1 })
      }
    },
        delMeal(index) {
             this.formFormatData.formData.relation.splice(index, 1)
        },
        delrewardbtn(saveindex){
          this.formFormatData.formData.reward.splice(saveindex, 1)
        },
        
        //链接打开
    uploadFileToggle(index) {
      this.index = index
      this.$refs.chooseIconLink.toggle()
    },
     //链接回调
    uploadIconFileChange(files) {
     const {
          currentRow: [file_path],
          displayData: [{ path }],
        } = files

      if (file_path||path) {
        const index = this.index
         this.formFormatData.formData.relation[index].relation_url = file_path||path

      } else {
        this.$message.error('请选择链接~!')
      }
    },
    //图片打开
    uploadTrigger(evt, index, model) {
      if(evt == 'chooseIcon'){
         this.index = index
        this.$refs.chooseFiless.toggle()
      }
    },
    //图片回调
    uploadFileChange(files) {
      const index = this.index
      const { key } = files
      const { displayData: [file_path] } = files
        if (this.current !== -1 && file_path) {
         this.formFormatData.formData.relation[index].relation_picture = file_path.file_path
         this.formFormatData.formData.relation = [...this.formFormatData.formData.relation]
        }
    },
    //秒杀链接打开
    uploadTriggerbtn(index){
         this.index = index
       this.$refs.spikechooseAdLink.toggle()
    },
    //秒杀链接回调
   handleAdLinkChange(files) {
    const { key } = files;
    
      if (key === "ChooseLink") {
        const {
          currentRow: [file_path],
          displayData: [{ title }],
        } = files;

        if (file_path || title) {
        const index = this.index
          this.formFormatData.formData.relation[index].relation_choice = {title:title,id:file_path}

        } else {
          this.$message.error("请选择链接~!");
        }
      }
    },
    //拼团链接打开
    groupuploadTriggerbtn(index){
        this.index = index
       this.$refs.groupchooseAdLink.toggle()
    },
    //拼团链接回调
    gruophandleAdLinkChange(files){
        const { key } = files;
      if (key === "ChooseLink") {
        const {
          currentRow: [file_path],
          displayData: [{ title }],
        } = files;
        if (file_path || title) {
        const index = this.index
          this.formFormatData.formData.relation[index].relation_choice = {title:title,id:file_path}
        console.log("jjjjjjjjjj", this.formFormatData.formData.relation[index].relation_choice)

        } else {
          this.$message.error("请选择链接~!");
        }
      }
    },
    //砍价链接打开
   bargainuploadTriggerbtn(index){
        this.index = index
       this.$refs.bargainchooseAdLink.toggle()
    },
    //砍价链接回调
    bargainhandleAdLinkChange(files){
        const { key } = files;
      if (key === "ChooseLink") {
        const {
          currentRow: [file_path],
          displayData: [{ name }],
        } = files;
        if (file_path || name) {
        const index = this.index
          this.formFormatData.formData.relation[index].relation_choice = {title:name,id:file_path}
        console.log("jjjjjjjjjj", this.formFormatData.formData.relation[index].relation_choice)

        } else {
          this.$message.error("请选择链接~!");
        }
      }
    },
    //抽奖链接打开
   lotteryuploadTriggerbtn(index){
        this.index = index
       this.$refs.lotterychooseAdLink.toggle()
    },
    //抽奖链接回调
    lotteryhandleAdLinkChange(files){
      console.log("fsdfdsfdsfds",files)
        const { key } = files;
      if (key === "ChooseLink") {
        const index = this.index
        const {
          currentRow: [file_path],
          displayData: [{ luck_title,luck_periods}],
        } = files;
        if (file_path || luck_title) {
          console.log("fdsfsfsdfdf",files)
        const index = this.index
          this.formFormatData.formData.relation[index].relation_choice = {title:luck_title,id:file_path}
        console.log("jjjjjjjjjj", this.formFormatData.formData.relation[index].relation_choice)

        } else {
          this.$message.error("请选择链接~!");
        }
         //处理期数
          this.formFormatData.formData.relation[index].peridos = luck_periods
        console.log("hhhhhhhhhh",  this.formFormatData.formData.relation[index].peridos)

      }
     
    },
    // 选择次卡操作
    TimecardBtn(index){
         this.index = index
      this.dialogTableVisible = true
      let altdata = []
      this.formFormatData.formData.relation[index].card.forEach(res=>{
          altdata.push(Number(res.card_class_id));
      })
      this.results = altdata
      console.log("0.0.0.0",this.NEWcurrentRow)

    },
    chooseGoodsbtn(ids, item){
       this.newcurrentRow = tooggleArray(this.newcurrentRow, ids)
       console.log(".............", this.newcurrentRow )
       //如果是选中状态就把选中的数据push到数组中，不是选择状态就把此数据删除
      if(this.newcurrentRow.includes(item.card_class_id)){
          this.timecardData.push(item)
          console.log('item+++++++++++++++', this.timecardData)
      }else{
          const newIndex =  this.timecardData.findIndex((displayItem) => {
          return displayItem.card_class_id === ids
        })
        this.timecardData.splice(newIndex, 1)
      }
    },
    toggle(){
       this.dialogTableVisible = false
    },
     cardeleteTable(scope,index) {
      this.formFormatData.formData.relation[index].card.splice(scope.$index, 1);
      this.newcurrentRow.splice(scope.$index, 1)
    },
    saveChoose(){
      const  arr = this.timecardData.map(res=>{
        return {
          card_class_id: res.card_class_id,
          title:res.name,
        };
      })
      //得到新数据并且去重
       const index = this.index
      this.formFormatData.formData.relation[index].card = fp.uniqBy('card_class_id',[...this.formFormatData.formData.relation[index].card,...arr]);
     console.log("1212341654",this.formFormatData.formData.relation)
      this.dialogTableVisible = false
    },
    }
}
</script>
<style lang="scss" scoped>
.filterselect{
  /deep/.el-input__inner{
    width: 154px;
  }
}
.wlm-upload-img{
      display: inline-block;
      width: 98px;
      height: 98px;
      border: 1px solid #f2f2f2;
    }
 .form-help {
  color: #999;
  line-height: 14px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
}
.wlm-form-group{
      &.flex-col{
        &:not(.no-top){
          margin-top: 10px;
        }
        .el-radio+.el-radio{
          margin-left: 0;
          margin-top: 20px;
        }
      }
      .el-form-item{
        margin:20px 0 0 20px;
        &.inline{
          display: inline-block;
          margin: 0;
        }
      }
    } 
.goods-list-box {
    width: 100%;
    min-height: 520px;
    padding: 20px 20px;
    margin-top: -20px;
    border-left: 1px solid #f2f2f2;

    .no-tabledata {
      text-align: center;

      svg {
        font-size: 20em;
      }
    }
   
    /deep/ .goods-serch {
      position: relative;
      margin-bottom: 20px;
      text-align: left;
      margin-top: 20px;

      .el-input__inner {
        width: 200px;
        border: none;
        background: rgb(237, 237, 237);
        border-radius: 20px;
        font-size: 12px;
      }

      i {
        cursor: pointer;
        left: 200px;
        margin-left: -35px;
        font-size: 20px;
      }
    }
  }
   .inputNumber {
    /deep/ .el-input {
      width: 80px;
    }
  }
  .fileItem {
    height: 66px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    font-size: 14px;
    border-radius: 3px;

    .fileName {
      text-align: right;
      width: 150px;
      padding-right: 20px;
      line-height: 60px;
    }
  }
  .fileItemHeader {
    height: 66px;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    font-size: 14px;

    .icon {
      margin-left: 170px;
      width: 100px;
    }

    .text {
      margin-left: 16px;
      width: 270px;
    }
    .link {
      margin-left: 16px;
      width: 290px;
    }
    .links {
      margin-left: 16px;
      width: 100px;
    }
  }
  .goods-list {
      width: 50%;

      &:not(:nth-last-child(1)) {
        padding-bottom: 20px;
      }

      .goods-item {
        border: 1px solid #d8d1d1;
        margin-right: 20px;
        padding: 8px 10px;
        border-radius: 3px;

        .img-center {
          border-radius: 10px;
          width: 90px;
          height: 80px;
        }

        .scale-grow {
          padding: 0 5px;
        }

        .ellipsis {
          width: 100%;
          font-size: 13px;
          text-align: left;
          margin-bottom: 16px;

          & + p.flex-row {
            width: 100%;
          }
        }

        .text-danger + .el-button {
          width: 62px;
          background: transparent;

          &:not(.is-not) {
            color: #409eff;
          }

          &.is-not {
            border-color: transparent;
            color: #fff !important;
            background: rgb(203, 203, 203) !important;
          }

          &.is-active {
            border-color: transparent;
            color: #fff !important;
            background: #409eff !important;
          }

          &.is-disabled {
            border-color: transparent;
            color: #fff !important;
            background: #c0c4cc !important;
          }
        }
      }
    }
</style>